<template>
	<view class="openMember">
		<image style="width: 100%;" :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/my/vip.jpg'" mode="widthFix"></image>

		<view class="titlemsg">
			<view class="tit">会员开通/年</view>
			<view class="msg">开通普通/专项会员限时优惠中</view>
			<view class="hr"></view>
		</view>

		<view class="list">
			<view v-for="(item,index) in list1" :key='index' :class="active == index?'active':''" @click="active = index">
				<view class="name">{{item.name}}</view>
				<view class="price">￥{{item.price}}</view>
				<view class="original_price">￥{{item.or_price || ''}}</view>
				<view class="sheng">立省{{item.or_price-item.price || ''}}元</view>
			</view>
		</view>
		
		<view class="content">
			<view class="title">
				<view>{{list1[active].name || ''}}权益</view>
			</view>
			<view v-for="(item,index) in list1[active].memjson" :key='index'>{{item}}</view>
		</view>
		
		<view class="btn" @click="payVip"> 立即开通会员 > </view>
		<view class="bottmmsg">注：点击立即开通视为您已阅读并同意 用户协议、隐私协议</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1:[],
				list:[
					// {name:'超级会员', 	price:"34020",ori_price:"34900",},
					// {name:'特级会员', 	price:"34020",ori_price:"34700",},
					// {name:'高级会员', 	price:"34020",ori_price:"34950",},
					// {name:'中级会员', 	price:"34020",ori_price:"34700",},
					// {name:'初级会员', 	price:"34020",ori_price:"34900",},
					// {name:'普通会员', 	price:"34020",ori_price:"34900",},
					// {name:'免费',     	price:"34020",ori_price:"34900",},
					// {name:'试用',     	price:"34020",ori_price:"34900",},
				],
				content:[
					// 超级会员
					// ["中医数据录入（后台中医信息录入部分）","望闻问切基础中医健康数据录入、分析","个体内五天五运基础分析与数据录入","五天配数纳藏数据录入与分析","衍天二十八宿人体纳分摄野分析","内六气司天在泉分析","内五运主岁中运分析","二十四节气南北斗杓正子对斗合亓炁内盛脉脏与内外斗杓脉脏冲应对斗合炁简析","脉脏内景表逐渐年旺炁内利定局分析","真太阴斗母元炁正到脉脏斡育分析","二十八宿对应穴位及疾病分区基础分析","真阴真阳二十四气周行分析","中天斗璇二十八宿任督二脉内黄道冲应临穴分析",],
					// 特级会员
					// ["中医数据录入（后台中医信息录入部分）","望闻问切基础中医健康数据录入、分析","个体内五天五运基础分析与数据录入","五天配数纳藏数据录入与分析","衍天二十八宿人体纳分摄野分析","内六气司天在泉分析","内五运主岁中运分析","二十四节气南北斗杓正子对斗合亓炁内盛脉脏与内外斗杓脉脏冲应对斗合炁简析","脉脏内景表逐渐年旺炁内利定局分析","真太阴斗母元炁正到脉脏斡育分析","二十八宿对应穴位及疾病分区基础分析","真阴真阳二十四气周行分析","中天斗璇二十八宿任督二脉内黄道冲应临穴分析","八风项分析","脉脏内景表逐渐年旺炁内利分析","日月合朔内炁储抟脉脏","真太阴斗母元炁正到脉脏斡育简表","明明炁与身明亓主病项简析","二十四节气六气主时分析","太阳游宫循经掌日分析","心内天经阴阳六气二十四节九十一渊八方遁衍甲子周流分析","元炁卦爻星度迟速增损分析","内五天经宿临位立运分析","身明炁逐年生杀起身气行病定局","逐年明炁预病例项",],
					// 高级会员
					// ["中医数据录入（后台中医信息录入部分）","望闻问切基础中医健康数据录入、分析","个体内五天五运基础分析与数据录入","五天配数纳藏数据录入与分析","衍天二十八宿人体纳分摄野分析","内六气司天在泉分析","内五运主岁中运分析","二十四节气南北斗杓正子对斗合亓炁内盛脉脏与内外斗杓脉脏冲应对斗合炁简析","脉脏内景表逐渐年旺炁内利定局分析","真太阴斗母元炁正到脉脏斡育分析","二十八宿对应穴位及疾病分区基础分析","真阴真阳二十四气周行分析","中天斗璇二十八宿任督二脉内黄道冲应临穴分析","八风项分析","脉脏内景表逐渐年旺炁内利分析","日月合朔内炁储抟脉脏","真太阴斗母元炁正到脉脏斡育简表","明明炁与身明亓主病项简析","二十四节气六气主时分析","太阳游宫循经掌日分析","心内天经阴阳六气二十四节九十一渊八方遁衍甲子周流分析","元炁卦爻星度迟速增损分析","内五天经宿临位立运分析","身明炁逐年生杀起身气行病定局","逐年明炁预病例项",],
					// 中级会员
					// ["中医数据录入（后台中医信息录入部分）","望闻问切基础中医健康数据录入、分析","个体内五天五运基础分析与数据录入","五天配数纳藏数据录入与分析","衍天二十八宿人体纳分摄野分析","内六气司天在泉分析","内五运主岁中运分析","二十四节气南北斗杓正子对斗合亓炁内盛脉脏与内外斗杓脉脏冲应对斗合炁简析","脉脏内景表逐渐年旺炁内利定局分析","真太阴斗母元炁正到脉脏斡育分析","二十八宿对应穴位及疾病分区基础分析","真阴真阳二十四气周行分析","中天斗璇二十八宿任督二脉内黄道冲应临穴分析","八风项分析","脉脏内景表逐渐年旺炁内利分析","日月合朔内炁储抟脉脏","真太阴斗母元炁正到脉脏斡育简析","明明炁与身明亓主病项简析","二十四节气六气主时分析","太阳游宫循经掌日分析","心内天经阴阳六气二十四节九十一渊八方遁衍甲子周流分析","真太阴斗母元炁正到脉脏斡育简表",],
					// 初级会员
					// ["中医数据录入（后台中医信息录入部分）","望闻问切基础中医健康数据录入、分析","个体内五天五运基础分析与数据录入","五天配数纳藏数据录入与分析","衍天二十八宿纳分摄野（人体）","内六气司天在泉简要分析","内五运主岁中运分析","二十四节气南北斗杓正子对斗合亓炁内盛脉脏与内外斗杓脉脏冲应对斗合炁分析","脉脏内景逐年旺炁内利定局分析","真太阴斗母元炁脉脏斡育分析","二十八宿对应穴位及疾病分区基础分析","真阴真阳二十四气周行分析","中天斗璇二十八宿任督二脉内黄道冲应临穴分析","八风项分析","日月合朔内炁储抟脉脏分析",],
					// 普通会员
					// ["中医数据录入（后台中医信息录入部分）","望闻问切基础中医健康数据录入、分析","个体内五天五运基础分析与数据录入","五天配数纳藏数据录入与分析","衍天二十八宿纳分摄野（人体）","内六气司天在泉分析","内五运主岁中运分析","脉脏内景表逐年旺炁内利定局分析","真太阴斗母元炁脉脏斡育分析",],
				],
				
				active:0
			};
		},
		onShow() {
			this.def_list()
		},
		methods:{
			def_list(){
				this.$u.post('/index/members').then(res=>{
					this.list1 = res.data
				})
			},
			payVip(){
				this.$u.post('/appuser/myinfo').then(res=>{
					if(!res.data.name){
						uni.showModal({
							title:'提示',
							content:'购买功能需要先绑定个人信息',
							success:res=>{
								if(res.confirm){
									uni.navigateTo({
										url:'/pages/my/edit/edit'
									})
								}
							}
						})
						return 
					}
					uni.login({
						success:res=>{
							this.$u.post('/wxpay/mempay',{
								members_id:this.list1[this.active].id,
								phone_status:'wechat',
								code:res.code,
							}).then(res=>{
								console.log(res.data);
								uni.requestPayment({
									provider:"wxpay",
									timeStamp:res.data.timeStamp,
									nonceStr:res.data.nonceStr,
									package:res.data.package,
									signType:res.data.signType,
									paySign:res.data.paySign,
									success:res=>{
										console.log(res,'cascsa');
										this.$u.toast('支付成功')
										setTimeout(_=>{
											uni.navigateBack()
										},700)
									},
									fail:err=>{
										console.log(err,'err');
										this.$u.toast('取消支付')
									}
								})
							})
						}
					})
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #393846;
		font-family: "SourceHanSansCN";
		overflow-x: hidden;
		.titlemsg {
			color: rgb(229, 203, 179);
			width: 95%;
			margin: 50rpx auto;
			position: relative;

			>view {
				&.tit {
					font-size: 50rpx;
				}

				&.msg {
					margin: 30rpx 0;
				}

				&.hr {
					width: 60%;
					height: 1px;
					background-color: rgba(255, 255, 255, .1);
					position: absolute;
					top: 35rpx;
					right: -20rpx;

				}

			}
		}

		.list {
			width: 95%;
			margin: 0 auto 100rpx;
			display: flex;
			overflow-x: scroll;

			>view {
				flex-shrink: 0;
				text-align: center;
				margin-right: 20rpx;
				min-width: 260rpx;
				border-radius: 50rpx;
				background-image: linear-gradient(rgb(70,75,94),rgb(46,47,65));
				padding: 30rpx 0;
				box-sizing: border-box;
				color: rgb(238, 206, 167);
				
				.name {
					font-size: 44rpx;
				}

				.price {
					font-size: 50rpx;
					margin: 15rpx 0 5rpx;
					// letter-spacing: -5rpx;
					&::first-letter{
						font-size: 38rpx;
					}
				}

				.original_price {
					font-size: 34rpx;
					color: rgb(170, 170, 170);
					text-decoration: line-through;
					margin-bottom: 20rpx;
				}

				.sheng {
					font-size: 24rpx;
					color: rgb(184, 145, 116);
				}
				&.active{
					background-image: linear-gradient(rgb(251,231,207),rgb(240,203,159));
					color: rgb(50, 29, 16);
					border: 10rpx solid #CA9859;
					
					.original_price,.sheng {
						color: rgb(50, 29, 16);
					}
				}
			}
		}
		
		.content{
			width: 95%;
			margin: 20rpx auto;
			border: 2px solid rgb(229, 196, 164);
			padding: 30rpx 50rpx ;
			box-sizing: border-box;
			border-radius: 50rpx;
			background-color: #302F41;
			font-size: 32rpx;
			font-family: "PingFang";
			color: rgb(229, 196, 164);
			position: relative;
			.title{
				position: absolute;
				top: -70rpx;
				left: 0;
				padding: 0;
				text-align: center;
				// border: 1px solid red;
				width: 100%;
				font-size: 40rpx;
				>view{
					display: inline-block;
					padding: 0 50rpx;
					background-image:linear-gradient(#393846,#302F41) ;
				}
				&::before{
					display: none;
				}
			};
			
			>view{
				margin: 40rpx 0;
				padding-left: 30rpx;
				position: relative;
				&::before{
					content: '';
					display: block;
					width: 15rpx;
					height: 15rpx;
					background-color: #E2B784;
					transform: rotate(45deg);
					position: absolute;
					top: 15rpx;
					left: 0;
				}
			}
		}

		.btn{
			width: 95%;
			margin: auto;
			padding: 20rpx;
			text-align: center;
			border-radius: 50rpx;
			font-weight: bold;
			color: rgb(87, 39, 15);
			background-image: linear-gradient(to right ,#EEDFB0,#DDA266);

		}
		
		.bottmmsg{
			font-size: 20rpx;
			text-align: center;
			margin: 20rpx auto;
			color: rgb(106, 106, 117);
		}
	}
</style>
